/* 公用事件和视频回调与控制接口和视频信息 */
export default {
	data() {
		return {
			// （无效）指定视频初始播放位置，单位为秒（s）
			initialtime: 0,
			// （无效）指定视频时长，单位为秒（s）
			duration: 0,
			
			errorTime:0,//播放出错或出现缓冲时的时间(比如拖动进度，视频会出现缓冲)
			// 播放进度变化时触发
			timeUpdate:[
				{	
					currentTime: 0,//当前时长(当前进度/时间)
					duration: 0,//总时长(总进度/时间)
					errorTime:0,//断网时间或播放出错的时间
					// 断网后又恢复了网络
					dwhfcurrTime: 0,//视频出错或断网后再链接了网络，使视频自动恢复续播
					/* 
						@问：明明有一个“currentTime”了，为什么还要增加个“dwhfcurrTime”
						@答：为了开发期间方便区分，就这么简单。
					*/
				   currtime: '00:00', //当前播放时间 字符串 计算后
				   druationTime: '00:00', //总时间 字符串 计算后
				   duration_init: 0,//总时长(总进度)int整数型，未转换的，用于进度条拖滑事件
				   sliderValue: 0, //控制进度条slider的值
				   updateState: true,//完成拖动后允许更新进度条的进度
				   changingSliderValue: 0,//[视频进度面板专属]设置进度条的值
				}
			],
			// 【百分比>>已缓冲】加载进度变化时触发，只支持一段加载
			proGress:[
				{
					//buffered:0,//已缓冲完成的视频百分比进度
					sliderValueBfb:0,//[新]已缓冲完成的视频百分比进度
				}
			],
			// 视频状态
			isPlay: false,//播放treu,暂停false
			// 暂停/播放按钮
			isPlaybtn: false,
			// [Touch.js]
			Touch_druationTime:'',// 更新 总时间 字符串 计算后
			Touch_currtime:'',// 更新 当前播放时间 字符串 计算后
			
			// watch_currtime 用于监听视频进度，如果改变了就关闭loading(主要用于修复ios和小程序)
			watch_currtime:'00:00:00',
			
			/* 以下为组件上的属性，当组件上绑定使用组件上的，没有就用内置的，或者组件上绑定了，但是用户在播放器内部可以手动的改变。因为不分开，组件上绑定了默认值，用户自己在播放器去改变绑定的值，等一会又变成了组件上绑定的值，如果要同步内部设置的值，需要用回调去更新组件上绑定的值，就很烦而且也不友好。 */
			// 是否循环播放（播放器内值的，用于可不在组件上绑定去更新）
			video_loop: false,
			// 是否静音播放（播放器内值的，用于可不在组件上绑定去更新）
			video_muted: false,
			// 视频的表现形式（播放器内值的，用于可不在组件上绑定去更新）
			video_object_fit: 'contain',
			// 解码器选择（播放器内值的，用于可不在组件上绑定去更新）
			video_codec: 'hardware',
			// 是否自动播放（播放器内值的，用于可不在组件上绑定去更新）
			video_autoplay: false,
			// 是否开启弹幕（播放器内值的，用于可不在组件上绑定去更新）
			video_isDanmu: false,
		}
	},
	watch:{
		isPlay:{
			handler(newPlay,oldPlay){
				//
			},
			immediate: true,
		},
		// 播放进度变化时触发
		watch_currtime:{
			handler:function(newCurrTime,oldCurrTime){
				// 只在小程序和ios下执行，修复bug，安卓无此bug
				//console.log("观察currtime =="+Val)
				// #ifdef MP
				this.onHiedloadingError()
				// #endif
				if (this.platform_mobile == 'ios'){
					this.onHiedloadingError()
				}
			},
			immediate:true,
		},
		timeUpdate:{
			handler:function(newUpdate,oldUpdate){		
				// 监听是播放状态=true并且时间>=0.01，关闭初始化播放时显示的onReadyLoading画面
				if (this.isPlay==true&&newUpdate[0].currentTime>=0.01){
					/* 2022-0113 新增优化 
					* 用于修复 iOS平台 部分平板上可能存在的当视频开始播放时
					* 没有关闭onReadyLoading画面，导致能听到声音，看不到视频画面的问题
					*/ 
					// 是否初始化播放状态（fasle = 已关闭精彩即将开始）
					this.onReady_Init_PlayState = false
				}

				// 判断是否是直播
				if (this.islive_player==true&&newUpdate[0].currentTime>=0.01){
					//  隐藏loading和Error面板
					this.onHiedloadingError()
				}

				/* 2022-0112 - 新增补丁
				 * 修复问题：有时候视频快进完 ，开始播放了 加载还一直显示
				 */
				// 判断当前进度是否大于errortime（errortime也用于调到指定位置时，记录时间）
				if (newUpdate[0].currentTime>=0.1&&newUpdate[0].currentTime>this.errorTime){
					// 关闭loading加载图
					// 只有视频没有出错并且是播放状态的情况下，才显示loading.
					if (!this.isError&&this.isPlay){
						// 显示loading(移步至视频出现缓冲里)
						this.isVideoShowLoadingCount.isVideoShowLoading = false
					}
				}
				
				// 获取视频详情信息
				this.getVideoInfo()

				// 将 播放进度 回调出去
				let e = {
					Events:'timeUpdate',
					detail:{
						currentTime: newUpdate[0].currentTime,
						duration: newUpdate[0].duration,
						errTime: this.errorTime,
					},
					msg:{
						currentTime: '当前时长(当前进度/时间)',
						duration: '总时长(总进度/时间)',
						errorTime: '断网时间或播放出错时，记录的时间',
					}
				}
				this.$emit("changeMyVideo",e)
			},
			immediate:true,
			deep:true,//可监听到对象内属性发生变化
		},
		// 监听小窗发生变化，重新执行控制面板隐藏再显示，才能刷新css样式
		isXiaoChuang:{
			handler(newXiaoChuang,oldXiaoChuang){
				this.isShowCommFullScreen().then(res=>{
					if (res==false){
						let timeout;
						// 由于动画需要时间，所以要延时一下，再让显示
						timeout = setTimeout(() => {
							this.isShowCommFullScreen()
							// 消除定时器
							clearTimeout(timeout)
						}, 400);
					}
				})
			},
			immediate: false,//不监听第一次
		},
		// （ps => 此处代码必须存在！不可删除，否则页面上引入播放器组件，没有配置进度条属性，会导致播放器加载不出来）
		// 监听组件外是否配置了播放器进度条相关属性，如果没有配置，则使用播放器内置的
		VideoSliderConfing:{
			handler(newSliderConfing,oldSliderConfing){
				//console.log('进度条配置')
				//console.log(newSliderConfing)
				// 用户未配置播放器进度条相关属性，使用播放器内置的
				if (newSliderConfing ==undefined || newSliderConfing=={}){
					// 判断当前主题
					if (this.Template == 'fiqy'){
						// 文艺清新主题
						// 设置播放器内置的仿爱奇艺播放器进度条
						this.VideoSliderConfing = this.VideoSliderConfing_fiqy
					}else if (this.Template = 'fyk') {
						// 极致简约主题
						// 设置播放器内置的仿优酷播放器进度条
						this.VideoSliderConfing = this.VideoSliderConfing_fyk
					}else {
						// 暂无更多，你也可以自定义
					}
				}else {
					// 使用了自定义的进度条相关属性配置
				}
			},
			immediate:true,// 必须监听第一次变化
			deep:true,
		},
		// 和上面一个是一样的，此处代码不可删除
		Template:{
			handler(newTemplate,oldTemplate){
				if (this.VideoSliderConfing==undefined || this.VideoSliderConfing=={}){
					if (newTemplate=='fiqy'){
						// 文艺清新主题
						// 设置播放器内置的仿爱奇艺播放器进度条
						this.VideoSliderConfing = this.VideoSliderConfing_fiqy
					}else if (newTemplate=='fyk'){
						// 极致简约主题
						// 设置播放器内置的仿优酷播放器进度条
						this.VideoSliderConfing = this.VideoSliderConfing_fyk
					}else {
						// 暂无更多，你也可以自定义
					}
				}else {
					// 使用了自定义的进度条相关属性配置
				}
			},
			immediate:false,// 此处不需要监听第一次变化
		},
		// VideoConfing属性监听已移动至VideoConfing.js里
		
		// 监听组件上绑定的loop是否循环播放的值
		loop:{
			handler(newLoop,oldLoop){
				this.video_loop = newLoop
			},
			immediate: true,
		},
		// 监听组件上绑定的muted是否静音播放的值
		muted:{
			handler(newMuted,oldMuted){
				this.video_muted = newMuted
			},
			immediate: true,
		},
		// 监听组件上绑定的object_fit视频的表现形式的值
		object_fit:{
			handler(newObject_fit,oldObject_fit){
				this.video_object_fit = newObject_fit
			},
			immediate: true,
		},
		// 监听组件上绑定的codec解码器选择的值
		codec:{
			handler(newCodec,oldCodec){
				this.video_codec = newCodec
			},
			immediate: true,
		},
		// 监听组件上绑定的autoplay是否自动播放的值
		autoplay:{
			handler(newAutoplay,oldAutoplay){
				// 不设置，再视频更新初始化时播放时，会调用
				this.video_autoplay = newAutoplay
			},
			immediate: true,
		},
		// 监听组件上绑定的isDanMu是否开启弹幕
		isDanMu:{
			handler(newisDanMu,oldisDanMu){
				this.video_isDanmu = newisDanMu
				this.isDanMu_FatbarrageView = newisDanMu
			},
			immediate: true
		},
	},
	methods:{
		/* ==================
		 * =    公用事件     =
		 * ==================
		 */
		// 根据秒获取时间
		formatSeconds(a) {
			var hh = parseInt(a / 3600);
			var mm = parseInt((a - hh * 3600) / 60);
			if (mm < 10) mm = "0" + mm;
			var ss = parseInt((a - hh * 3600) % 60);
			if (ss < 10) ss = "0" + ss;
			if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
			var length = hh + mm + ":" + ss;
			if (a >= 0) {
				return length;
			} else {
				return "00:00";
			}
		},
		/* 生成随机颜色[用于弹幕文本] */
		getRandomColor: function() {
			const rgb = []
			for (let i = 0; i < 3; ++i) {
				let color = Math.floor(Math.random() * 256).toString(16)
				color = color.length == 1 ? '0' + color : color
				rgb.push(color)
			}
			return '#' + rgb.join('')
		},
		// 同步获取视频时长(视频进度)并更新到进度条上
		async getTimeupdateSync(event){
			// event.detail = {currentTime, duration}
			// console.log(event)
			// console.log("播放进度变化时触发")
			// console.log(event.detail)
			
			let duration = event.detail.duration //总时长(总进度)
			let currentTime = event.detail.currentTime //当前时长(当前进度)
			let sliderValue = event.detail.currentTime / duration * 100 //进度条的值
			let second = sliderValue / 100 * duration// 当前进度(整数型)
			//判断拖拽完成后才触发更新，避免拖拽失效
			if (this.timeUpdate[0].updateState == true) { 
				this.timeUpdate[0].sliderValue = sliderValue // 进度条的值
				// console.log("进度条的值 = "+sliderValue)
			} else {
				// 
			}
			// 更新 总时长 整数型 用于进度条拖滑
			this.timeUpdate[0].duration_init = duration
			// 更新 总时间 字符串 计算后 [控制面板里进度条两边的时间]
			this.timeUpdate[0].druationTime = this.formatSeconds(duration)
			// 更新 当前播放时间 字符串 计算后 [控制面板里进度条两边的时间]
			this.timeUpdate[0].currtime = this.formatSeconds(currentTime)
			// 用于监听视频进度，如果改变了就关闭loading(主要用于修复ios和小程序)
			this.watch_currtime = this.timeUpdate[0].currtime
		},
		// 获取倍数索引（用于开发者调用倍数方法，不用设置索引，此方法会自动计算）
		playbackRate_besuIndex(e){
			// 由于是倒序排序，所以2.0=0 ; 1.5=1 ; 1.25=2 ; 1.0=3 ; 0.8=4 ; 0.5=5
			// e = 当前的倍数数字 （0.5/0.8/1.0/1.25/1.5/2.0）
			e = Number(e) //转一下类型，因为倍数配置文件里，是String类型的
			var besuIndex
			switch (e) {
				case 0.5:
					besuIndex = 5
					break;
				case 0.8:
					besuIndex = 4
					break;
				case 1.0:
					besuIndex = 3
					break;
				case '正常':
					besuIndex = 3
					break;
				case 1.25:
					besuIndex = 2
					break;
				case 1.5:
					besuIndex = 1
					break;
				case 2.0:
					besuIndex = 0
					break;
				default:
					break;
			}
			return besuIndex
		},
		// 用于开发者调用sendDanmu发送弹幕，把弹幕信息写入到sendDanmuObj里
		SetsendDanmuObj_api(e){
			// 1. 设置弹幕颜色
			this.sendDanmuObj.color = e.color || this.getRandomColor()
			// 2. 设置弹幕边框色
			this.sendDanmuObj.border = e.border || ''
			// 3. 设置弹幕内容
			this.sendDanmuObj.text = e.text || ''
			// 4. 设置用户头像
			this.sendDanmuObj.avatar = e.avatar || ''
			// 5. 设置圆角
			this.sendDanmuObj.border_radius = e.border_radius || ''
			// 6. 设置背景线性渐变色
			this.sendDanmuObj.background_image = e.background_image || ''
			// 7. 设置背景线性渐变色透明度
			this.sendDanmuObj.background_image_opacity = e.background_image_opacity || 1
			// 8. 设置弹幕item透明度（当前发送的弹幕-整体透明度）
			this.sendDanmuObj.opacity = e.opacity || 1
			// 9. 设置弹幕时间（记录发送的时间）
			this.sendDanmuObj.time = Math.round(this.timeUpdate[0].currentTime)//将小数转为整数
		},
		// 获取播放器详细信息事件
		getVideoInfo(){
			let { 
				// 3.3.6新增
				timeUpdate,
				show,
				proGress,
				isPlay,
				Touch_druationTime,
				Touch_currtime,
				video_loop,
				video_muted,
				video_object_fit,
				video_codec,
				video_autoplay,
				video_isDanmu,
				FullscreenWidth,
				FullscreenHeight,
				TouchFullWidth,
				TouchFullHeight,
				FullSliderWidth,
				isFullScreenChange,
				platform_mobile,
				changingSliderX,
				isSuoPing,
				Drawer,
				isopenDrawerItem,
				getSysInfoBattery,
				getSysInfoTime,
				createAudio,
				// 3.5.0新增
				besuIndex,
				besuText
			} = this

			
			let VideoInfo = {
				// 3.3.6新增
				timeUpdate,
				show,
				proGress,
				isPlay,
				Touch_druationTime,
				Touch_currtime,
				video_loop,
				video_muted,
				video_object_fit,
				video_codec,
				video_autoplay,
				video_isDanmu,
				FullscreenWidth,
				FullscreenHeight,
				TouchFullWidth,
				TouchFullHeight,
				FullSliderWidth,
				isFullScreenChange,
				platform_mobile,
				changingSliderX,
				isSuoPing,
				Drawer,
				isopenDrawerItem,
				getSysInfoBattery,
				getSysInfoTime,
				createAudio,
				// 3.5.0新增
				besuIndex,
				besuText
			}
			//console.log(VideoInfo)

			this.$emit('changeVideoInfo',VideoInfo)
		}
	}
}